import {emojiList} from '@/shared/emojiList'
import { useState,useMemo } from 'react'
import styles from './EmojiSelector.module.scss'
export default function EmojiSelector(props:{
  setSign: (value: string)=>void
}){
  const [curTab, setCurTab] = useState(0)
  const handleChooseTag = (index: number) => {
    setCurTab(index)
  }
  const chooseItem=(item: string)=>{
    props.setSign(item)
  }

  const table: [string, string[]][] = [
    [ '表情', [ 'face-smiling', 'face-affection', 'face-tongue', 'face-hand', 'face-neutral-skeptical', 'face-sleepy', 'face-unwell', 'face-hat', 'face-glasses', 'face-concerned', 'face-negative', 'face-costume' ] ],
    [ '手势', [ 'hand-fingers-open', 'hand-fingers-partial', 'hand-single-finger', 'hand-fingers-closed', 'hands', 'hand-prop', 'body-parts' ] ],
    [ '人物', ['person', 'person-gesture', 'person-role', 'person-fantasy', 'person-activity', 'person-sport', 'person-resting'] ],
    ['衣服', ['clothing']],
    [ '动物', [ 'cat-face', 'monkey-face', 'animal-mammal', 'animal-bird', 'animal-amphibian', 'animal-reptile', 'animal-marine', 'animal-bug' ] ],
    ['植物', ['plant-flower', 'plant-other']],
    ['自然', ['sky & weather', 'science']],
    ['食物', ['food-fruit', 'food-vegetable', 'food-prepared', 'food-asian', 'food-marine', 'food-sweet']],
    ['运动', ['sport', 'game']]
  ]
  const boardEmojis = useMemo(()=>{
    const selectedItems = table[curTab][1]
    return selectedItems.map(ele=>{
      return emojiList.find(ceb=>ceb[0]===ele)?.[1].map(a=>a.replace(/\s/g, ''))
    }).flat()
  } ,[curTab])
  return (
    <div className={styles.emojiSelector}>
      <section className={styles.emojiTable}>
        <nav>
          {table.map((sItem,sIndex)=>( 
            <span key={sIndex}
              className={curTab === sIndex ? styles.active : ''}
              onClick={()=>handleChooseTag(sIndex)}>{sItem[0]}
            </span>
          ))}
        </nav>
        <ol>
          {boardEmojis.map((eItem, eIndex)=>(
            <li key={eIndex} onClick={()=>chooseItem(eItem!)}>{eItem}</li>
          ))}
        </ol>
      </section>
    </div>
  )
}